import React, { PureComponent } from 'react'
import MenuBar from '@/components/MenuBar'
import BangumiPlayer from './player'
import BangumiInfo from './info'
import BangumiToolbar from './toolbar'
import BangumiEpisode from './episode'
import BangumiSection from './section'
import BangumiRelated from './related'
import Loading from '@/components/Loading'
import BangumiComment from '@/components/Comment'
import { bangumiApi } from '@/api'
import css from './index.module.scss'
export default class Bangumi extends PureComponent {
    state = {
        detailData: null,
        currentTab: 0,
        videoComments: [],
        tabs: [
            { id: 1, title: '简介', other: '' },
            { id: 2, title: '评论', other: '' }
        ]
    }

    getId = props => {
        const obj = props || this.props
        const { match: { params: { id } } } = obj
        return id
    }

    get commentId() {
        return this.state?.detailData?.epInfo?.aid ?? -1        
    }

    getData = async () => {
        try {
            const { data } = await bangumiApi.getDetail({
                id: this.getId()
            })
            if (data) {
                this.setState({
                    detailData: data
                })
            }
        } catch (error) {
            
        }
    }

    getComments = async () => {
        try {
            if (this.commentId < 0) {
                return
            }
            const { data } = await bangumiApi.getComment({
                oid: this.commentId
            })
            if (data) {
                const { replies, page: { acount } } = data
                const { tabs } = this.state
                tabs[1].other = acount
                this.setState({
                    videoComments: replies,
                    tabs: [...tabs]
                })
            }
        } catch (error) {
            
        }
    }

    handleTabClick = (tab, index) => {
        this.setState({
            currentTab: index
        }, () => {
            if (index === 1 && !this.state.videoComments.length) {
                // 初次加载评论
                this.getComments()
            } 
        })
    }
    handleTabRender = tab => {
        return (
            <span style={{'whiteSpace': 'nowrap', 'overflow': 'hidden', 'textOverflow': 'ellipsis'}}>
                {tab.title} {tab.other}
            </span>
        )
    }

    componentDidMount() {
        this.getData()
    }

    componentDidUpdate(prevProps) {
        if (this.getId(prevProps) !== this.getId()) {
            this.getData()
        }
    }

    render() {
        const { detailData, currentTab, tabs, videoComments } = this.state
        return (
            <>
                { detailData && 
                    <BangumiPlayer 
                        detailData={detailData}
                    />
                }
                {
                    detailData && 
                        <div className={css["sticky"]}>
                            <MenuBar 
                                tabs={tabs} 
                                currentTab={currentTab} 
                                swipeable={false}
                                onTabClick={this.handleTabClick}
                                renderTab={this.handleTabRender}
                            />
                        </div>
                }
                {
                    detailData && <div style={{display: currentTab === 0 ? 'block' : 'none'}}>
                        <BangumiInfo detailData={detailData} />
                        <BangumiToolbar detailData={detailData} />
                        <BangumiEpisode detailData={detailData} />
                        <BangumiSection detailData={detailData} />
                        <BangumiRelated detailData={detailData} />
                    </div>
                }
                {
                    detailData && <div style={{display: currentTab === 1 ? 'block' : 'none'}}>
                        { videoComments.length ? <BangumiComment comments={videoComments} /> : <Loading /> }
                    </div>
                }
            </>
        )
    }
}
